"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/2
 */
import * as React from 'react'

const {View, ScrollView, KeyboardAvoidingView} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import DynamicItem from "../../component/DynamicItem";
import MyInputToolBar from "../../component/MyInputToolBar";
import Line from "../../component/Line";
import CommentItem from "../../component/CommentItem";
import MyText from "../../component/MyText";
import {PostingsDetailPage} from "../../interface/router";
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant";
import Colors from "../../assets/styles/Colors";
import PraiseItem from "../../component/PraiseItem";


class Page extends React.Component<PostingsDetailPage, any> {


    constructor(props: any, context: any) {
        super(props, context);
    }


    onSend = (item, message) => {
        this.props.dispatch({
            type: 'post/newComment',
            payload: {
                message,
                id: this.props.post.dynamicItem.id,
                item,
                postType: this.props.post.postType
            }
        })
    };


    //点赞
    onPraise = (type: string, item) => {
        this.props.dispatch({
            type: 'post/praise',
            payload: {
                type,
                typeId: item.id,
                item,
                from: this.props.post.postType
            }
        })
    };
    //评论删除
    onDeleteCommentPress = (c: commentItem) => {

        const types = {
            group:'group_post',
            post:'post'
        };
        this.props.dispatch({
            type: 'post/deleteComment',
            payload: {
                comment: c,
                typeId:this.props.post.dynamicItem.id,
                cid:c.id,
                type:types[this.props.post.postType]
            }
        });
    };
    renderComment = () => {
        let comments = [];
        if (this.props.post.dynamicItem.comments && Array.isArray(this.props.post.dynamicItem.comments) && this.props.post.dynamicItem.comments.length > 0) {
            this.props.post.dynamicItem.comments.map((item: commentItem, index) => {
                if (item && item.user) {
                    comments.push(<CommentItem key={index}
                                               item={item}
                                               onDeletePress={this.onDeleteCommentPress}
                                               onPraisePress={this.onPraise.bind(this, 'postcomment')}/>)
                }
            })
        }
        return (<View style={{marginBottom: 35}}>{comments}</View>);
    };

    renderPraise = () => {
        const {dynamicItem} = this.props.post;
        let praise = [];
        if (!dynamicItem.praise) return praise;
        if (!dynamicItem.praise.praiseDTOList || dynamicItem.praise.praiseDTOList.length <= 0) return praise;
        dynamicItem.praise.praiseDTOList.map((item, index) => {
            praise.push(<PraiseItem item={item} key={index}/>)
        });

        return praise;
    };

    render() {

        return (
            <View style={[commonStyles.container, commonStyles.relative, {backgroundColor: '#fff'}]}>

                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: '发表', tintColor: '#fff'}}
                />
                <View style={[commonStyles.container, {
                    backgroundColor: Colors.White,
                    width: SCREEN_WIDTH,
                    height: SCREEN_HEIGHT,
                    paddingBottom: 45
                }]}>
                    <ScrollView keyboardDismissMode='on-drag'>
                        <DynamicItem item={this.props.post.dynamicItem} onLikePress={this.onPraise.bind(this, 'post')}/>
                        <Line/>
                        {this.renderComment()}
                        <View style={[commonStyles.centerVH, {backgroundColor: '#F5F4F4', padding: 10}]}>
                            <MyText>赞</MyText>
                        </View>
                        {this.renderPraise()}
                    </ScrollView>
                </View>
                <MyInputToolBar placeholder="评论这个帖子" onSend={this.onSend.bind(this, this.props.post.dynamicItem)}/>
            </View>
        );
    }
}


export default connect(
    ({auth, post, group}) => ({auth, post, group})
)(Page);


/*   */